import { Calc } from '@/api'
import { Button, Form, Input } from 'react-vant'
import { Helmet, useMutation } from 'umi'

export default function PageForm2() {
  const [form] = Form.useForm()

  // #计算
  const { mutate: calc, isLoading: isCalcLoading } = useMutation({
    mutationFn: Calc,
    onSuccess: (res) => {
      const { gdcb, lr } = res
      form.setFieldValue('gdcb', gdcb)
      form.setFieldValue('lr', lr)
    },
  })

  const handleSubmit = (values: any) => {
    calc({
      type: 2,
      data: {
        ...values,
      },
    })
  }

  return (
    <>
      <Helmet>
        <title>盈亏平衡计算</title>
      </Helmet>

      <section className="relative p-4 min-h-screen">

        <Form
          form={form}
          onFinish={handleSubmit}
          footer={(
            <footer className="mt-6">
              <Button round loading={isCalcLoading} nativeType="submit" type="primary" block>
                开始计算
              </Button>
            </footer>
          )}
        >

          <div className="overflow-hidden bg-white rounded-lg">
            <Form.Item
              labelWidth={120}
              label="营业额"
              name="yye"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入营业额" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="综合毛利率"
              name="zhmll"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入综合毛利率%" suffix="%" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="耗材成本"
              name="hccb"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入耗材成本" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="水费"
              name="sf"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入水费" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="电费"
              name="df"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入电费" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="煤气费"
              name="mqf"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入煤气费" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="月租金"
              name="yzj"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入月租金" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="人工工资"
              name="rggz"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入人工工资" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="社保"
              name="sb"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入社保" suffix="元" />
            </Form.Item>

            <Form.Item
              labelWidth={120}
              label="公积金"
              name="gjj"
              rules={[
                {
                  type: 'number',
                  message: '请输入数字',
                  transform: value => Number(value),
                },
              ]}
            >
              <Input clearable placeholder="请输入公积金" suffix="元" />
            </Form.Item>
          </div>

          <div className="overflow-hidden mt-4 bg-white rounded-lg">

            <Form.Item
              labelWidth={120}
              label="固定成本"
              name="gdcb"
            >
              <Input placeholder="待计算" readOnly suffix="元" className="font-bold" />
            </Form.Item>
            <Form.Item
              labelWidth={120}
              name="lr"
              label="利润（不含税）"
            >
              <Input placeholder="待计算" readOnly suffix="元" className="font-bold" />
            </Form.Item>
          </div>
        </Form>
      </section>
    </>
  )
}
